<template>
  <div class="dashboard-container">

    <!-- <p style="border-bottom:1px solid #E8E8E8  ;padding-bottom:20px;margin-bottom:0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录角色:{{ name }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;权限:<span v-for="role in roles" :key="role">{{ role }}</span></p> -->
    <div>
      <el-row :gutter="10" style="margin-bottom: 60px">
        <el-col v-if="userList" :span="6" :data="userList">
          <el-card style="color: #409EFF">
            <div><i class="el-icon-user-solid" /> 用户人数</div>
            <div style="padding: 10px 0 10px 5px; text-align: left; font-weight: bold;border-bottom:1px solid #E8E8E8 ">
              {{this.userList[0].user_all}}
            </div>
            <div style="padding: 10px 0 0  5px; text-align: left; font-size: 4px ">
              日注册量  {{this.userList[1].user_today}}
            </div>
          </el-card>
        </el-col>
        <el-col v-if="collectList" :span="6" :data="collectList">
          <el-card style="color: #F56C6C">
            <div><i class="el-icon-user-solid" /> 收藏地址总数量</div>
            <div style="padding: 10px 0 10px  5px; text-align: left; font-weight: bold;border-bottom:1px solid #E8E8E8 ">
               {{this.collectList[0].collect_all}}
            </div>
            <div style="padding: 10px 0 0  5px; text-align: left; font-size: 4px ">
              日新增数量
               {{this.collectList[1].collect_today}}
            </div>
          </el-card>
        </el-col>
        <el-col v-if="favoritesList" :span="6" :data="favoritesList">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-bank-card" /> 收藏夹总数量</div>
            <div style="padding: 10px 0 10px  5px; text-align: left; font-weight: bold;border-bottom:1px solid #E8E8E8 ">
               {{this.favoritesList[0].favorites_all}}
            </div>
            <div style="padding: 10px 0 0  5px; text-align: left; font-size: 4px ">
              日新增数量
               {{this.favoritesList[1].favorites_today}}
            </div>
          </el-card>
        </el-col>
        <el-col v-if="expressList" :span="6" :data="expressList">
          <el-card style="color: #E6A23C">
            <div><i class="el-icon-s-shop" /> 待取数</div>
            <div style="padding: 10px 0 10px  5px; text-align: left; font-weight: bold;border-bottom:1px solid #E8E8E8 ">
              1
            </div>
            <div style="padding: 10px 0 0  5px; text-align: left; font-size: 4px ">
              日派单量
              1
            </div>
          </el-card>
        </el-col>

      </el-row>


    </div>
    <!-- 快件实时分布y -->
    <div class="lib">

      <div class="box1" />

      <div class="box2"/>

    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
// import courier from '@/api/e/courier/courier'
// import express from '@/api/e/express/express'
//import user from '@/api/e/user/user'
import * as echarts from 'echarts'

export default {
 
  data() {
    return {
      collectList: [], // 查询条件
      userList: [], // 查询条件
      favoritesList: [], // 查询条件
      data1: [],
      data2: []
    }
  },
  mounted() {
    setTimeout(() => {
      this.showbox1()
    }, 1000)
    setTimeout(() => {
      this.showbox3()
    }, 1000)
  },

  created() {
     this.getFavoritesData()
     this.getCollecdtData()
     this.getUsersData()
  },
  methods: {
    // 获取收藏夹console数据
    getFavoritesData() {
      this.$http({
      url: this.$http.adornUrl('/admin/favorites/console'),
      method: 'get',
      params: this.$http.adornParams({})
      }).then(({data}) => {
            console.log(data.data)
            this.favoritesList = data.data
      })
    },
    // 获取收藏地址console数据
    getCollecdtData() {
      this.$http({
      url: this.$http.adornUrl('/admin/collect/console'),
      method: 'get',
      params: this.$http.adornParams({})
      }).then(({data}) => {
            console.log(data.data)
            this.collectList = data.data
      })
    }, 
    // 获取用户console数据
    getUsersData() {
       this.$http({
          url: this.$http.adornUrl('/admin/user/console'),
          method: 'get',
          params: this.$http.adornParams({})
          }).then(({data}) => {
            console.log(data.data)
            this.userList = data.data
          })

     
    },
    showbox1() {
      var data4 = []
      // express.getExpressConsoleMonth()
      //   .then((response) => {
          // console.log(response.data.expressMonth)
          // var result = response.data.expressMonth

          // this.data1 = result.map(item => (item.month))
        
          // this.data1 = result.map(item => (item.month))
          // this.data2 = result.map(item => (item.sum))
         

          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.querySelector('.box1'))
          // 绘制图表
          myChart.setOption({
            title: {
              text: '云收藏量',
              textStyle: {
                color: '#000',
                fontSize: 16

              },
              textAlign: 'auto'
            },
            // 提示框
            tooltip: {},
            // 工具栏
            toolbox: {
              // 配置具体的工具按钮
              feature: {
                // 保存图片
                saveAsImage: {},
                // 区域缩放
                dataZoom: {},
                // 图标类型切换
                magicType: {
                  type: ['line', 'bar', 'stack']
                }
              }
            },
            // x轴
            //['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            xAxis: {
              data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            // 图例
            legend: {},
            // y轴
            yAxis: {

            },
            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            // 系列
            series: [
              {
                name: new Date().getFullYear() - 1 + '年',
                type: 'bar',
                data: [100, 150, 120, 90, 70, 80, 60, 120, 50, 60, 270, 100]
              },
              {
                name: (new Date().getFullYear() - 2) + '年',
                type: 'bar',
                data: [70, 150, 120, 100, 70, 80, 90, 80, 50, 60, 200, 60]
              }
            ]
          })
       
    },
    // 饼状图---------------------------------------------------------
    showbox3() {
      var myChart = echarts.init(document.querySelector('.box2'))
      var option = {
        title: {
          text: '总收藏',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 560, name: '2023' },
              { value: 996, name: '2022' }

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    }

  }
}

</script>
<style lang="scss" scoped>

  #main{
    width: 100%;
    height: 480px;
    // background-color: aqua;
  }

   #pie{
    width: 100%;
    height: 480px;
    // background-color: aqua;
  }
  .lib{
  display: flex;
  flex-wrap: wrap;
  &>div{
    width: 50%;
    height: 400px;
    background-color: #ffffff;
   // border: 1px solid rgb(48, 77, 102);
    // box-shadow:0px 0px  10px #e8e8e8;

  }
}

</style>
